<!--
 * @Description:qq定时器的使用
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-01 22:12:28
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qq定时器的使用</title>
		<style>
			div {
				float: left;
				margin: 10px;
			}

			#div1 {
				width: 50px;
				height: 50px;
				background: red;
			}

			#div2 {
				width: 250px;
				height: 180px;
				background: #CCCCCC;
				display: none;
			}
		</style>

	</head>
	<script>
		window.onload = function() {
			var odiv1 = document.getElementById("div1");
			var odiv2 = document.getElementById("div2");
			var timer = null;

			odiv1.onmouseover = odiv2.onmouseover = function() {
				clearTimeout(timer);
				odiv2.style.display = 'block';
			}

			odiv1.onmouseout = odiv2.onmouseout = function() {
				timer = setTimeout(function() {
					odiv2.style.display = 'none';
				}, 500)
			}

		}
		// window.onload=function(){
		//     var odiv1=document.getElementById("div1");
		//     var odiv2=document.getElementById("div2");
		//     var timer=null;
		//     
		//     odiv1.onmouseover=function(){ 
		//         clearTimeout(timer);
		//         odiv2.style.display='block'; 
		//     }
		//     
		//     odiv1.onmouseout=function(){ 
		//       timer=setTimeout(function(){
		//           odiv2.style.display='none';
		//        },500)
		//     }
		//     
		//     odiv2.onmousemove=function(){
		//         clearTimeout(timer);
		//     }
		//     // 
		//     odiv2.onmouseout=function(){
		//         timer=setTimeout(function(){
		//             odiv2.style.display='none';
		//         },500)  
		//     }
		// }
	</script>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>
